<template>
<div>
    <div class="ceil" 
         v-for="item in imageList" 
         :key="item.id"
         :style="{background: `url(${item.img_url})`}"
         @click="jumpToDetail(item.id)" >
        <div class="one">
            <p class="title">{{item.title}}</p>
            <p class="zy">{{item.zhaiyao}}</p>
        </div>
    </div>
</div>

</template>

<script>
import { getImage } from "../apis/imageInfo";

export default {
data () {
    return {
        imageList:[],
        imageAllList:[],
        page:1,
    }
},
props: {
    val:Number
},
mounted () {
    //console.log(this.$route.params.id);
    //console.log(this.val);
    this.init()
},
methods: {
    jumpToDetail(id){
        this.$router.push({path:`/imageDetail/${id}`})
    },
    init(){
        getImage(this.val)
            .then(res => {
                //console.log(res);
                this.imageList = res.data.message
                //console.log(this.imageList);
            })
    }
}
}
</script>

<style lang="less" scoped>
.ceil{
    position: relative;
    // width:100vw;
    height: 35vh;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    margin: 10px 0;
    .one{
        position: absolute;
        height: 8.5vh;
        width: 100vw;
        background-color: rgba(150, 84, 84, 0.24);
        bottom: 0;
        color: honeydew;
        .title{
            font-size: 18px;
            line-height: 25px;
        }
        .zy{
            line-height: 20px
        }
    }
}
</style>